<template>
  <div>
    <avue-form
      v-model="groupMerchantForm"
      ref="groupMerchantForm"
      :option="groupMerchantOption"
      @row-update="rowUpdate"
    ></avue-form>
  </div>
</template>

<script>
import { getRegion } from "@/api/system/dict";
import { getDetail, updateGroup } from "@/api/rb-oem/posinfo/pos_info";
import { isMobile } from "@/util/validate";

export default {
  name: "wf-group-merchant-form",
  props: {
    rpiNo: {
      type: String,
      default: "",
    },
    createUser: {
      type: String,
      default: "",
    },
  },
  watch: {
    process: {},
  },
  data() {
    const validatePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else if (!isMobile(value)) {
        callback(new Error("手机号码不正确！"));
      } else {
        callback();
      }
    };
    return {
      groupMerchantForm: {},
      groupMerchantOption: {
        menuBtn: false,
        height: "auto",
        calcHeight: 30,
        tip: false,
        border: true,
        index: true,
        selection: true,
        columnBtn: false,
        column: [
          {
            label: "商户类型",
            prop: "rpiType",
            type: "select",
            dicUrl: "/api/blade-system/dict/dictionary?code=rpi_type",
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            dataType: "string",
            showColumn: false,
            hide: true,
            search: true,
            rules: [
              {
                required: true,
                message: "请输入商户类型",
                trigger: "blur",
              },
            ],
          },
          {
            label: "行业类目",
            prop: "rpiMccCode",
            type: "select",
            dicUrl: "/api/rb-oem/oem/posinfo/pos_info/selectMcc",
            props: {
              label: "industryName",
              value: "industryCode",
            },
            span: 12,
            showColumn: false,
            hide: true,
            rules: [
              {
                required: true,
                message: "请选择行业类目",
                trigger: "blur",
              },
            ],
          },
          {
            label: "客户经理",
            prop: "accountManager",
            type: "select",
            dicUrl: `/api/rb-oem/oem/posinfo/pos_info/accountManagerList?createUser=${this.createUser}`,
            props: {
              label: "userName",
              value: "userId",
            },
            dataType: "string",
            showColumn: false,
            hide: true,
            search: true,
            rules: [
              {
                required: true,
                message: "请输入商户类型",
                trigger: "blur",
              },
            ],
          },
          {
            label: "门头名称",
            prop: "rpiName",
            type: "input",
            search: true,
            rules: [
              {
                required: true,
                message: "请输入门头名称",
                trigger: "blur",
              },
            ],
          },
          {
            label: "联系人",
            prop: "contactName",
            search: true,
            rules: [
              {
                required: true,
                message: "请输入联系人",
                trigger: "blur",
              },
            ],
          },
          {
            label: "联系电话",
            prop: "contactNumber",
            rules: [
              {
                required: true,
                validator: validatePhone,
                trigger: "blur",
              },
            ],
          },
          // {
          //   label: "归属集团",
          //   prop: "rpiGroup",
          //   type: "input",
          //   span: 24,
          //   sortable: true,
          //   rules: [
          //     {
          //       required: true,
          //       message: "请输入归属集团",
          //       trigger: "blur",
          //     },
          //   ],
          // },
          {
            label: "省份",
            prop: "province",
            slot: true,
            display: false,
            hide: true,
          },
          {
            label: "地市",
            prop: "city",
            slot: true,
            display: false,
            hide: true,
          },
          {
            label: "区县",
            prop: "area",
            slot: true,
            display: false,
            hide: true,
          },
          {
            label: "省份/地市/区县",
            labelWidth: 130,
            prop: "provinceCityArea",
            type: "cascader",
            props: {
              label: "name",
              value: "code",
            },
            lazy: true,
            lazyLoad: this.lazyLoad,
            span: 24,
            showColumn: false,
            hide: true,
            rules: [
              {
                required: true,
                message: "请选择省份/地市/区县",
                trigger: "blur",
              },
            ],
          },
          {
            label: "详细地址",
            prop: "address",
            span: 24,
            minRows: 2,
            type: "textarea",
            hide: true,
            rules: [
              {
                required: true,
                message: "请输入详细地址",
                trigger: "blur",
              },
            ],
          },
        ],
      },
      rejectTypeName: "",
      rejectReason: "",
      rejectSolution: "",
      rejectList: [], // 驳回节点列表
    };
  },
  methods: {
    rowUpdate(row, index, done, loading) {
      [row.province, row.city, row.area] = row.provinceCityArea;
      updateGroup(row).then(
        () => {
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          loading();
          window.console.log(error);
        }
      );
    },
    async lazyLoad(node, resolve) {
      let stop_level = 2;
      let level = node.level;
      let data = node.data || {};
      let code = data.code;
      let list = [];
      if (this.rpiNo) {
        await getDetail(this.rpiNo).then((res) => {
          const form = res.data.data;
          form.provinceCityArea = [form.province, form.city, form.area];
          this.groupMerchantForm = form;
        });
      }
      let callback = () => {
        resolve(
          (list || []).map((ele) => {
            return Object.assign(ele, {
              leaf: level >= stop_level,
            });
          })
        );
      };
      if (level == 0) {
        getRegion(code).then(
          (res) => {
            list = res.data.data;
            callback();
          },
          (error) => {
            window.console.log(error);
          }
        );
      } else if (level == 1) {
        getRegion(code).then(
          (res) => {
            list = res.data.data;
            callback();
          },
          (error) => {
            window.console.log(error);
          }
        );
      } else if (level == 2) {
        getRegion(code).then(
          (res) => {
            list = res.data.data;
            callback();
          },
          (error) => {
            window.console.log(error);
          }
        );
      } else {
        callback();
      }
    },
  },
};
</script>

<style>
</style>